<!DOCTYPE html>
<?php
require("dblink.php");
?>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>魔仙堡</title>

    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">

    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.min.css">

    <style type="text/css">
      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;

        background: url(img/123.png) no-repeat;
        background-color: rgba(220, 220, 220, 0.5);
        /* background-size: 100% 100%; */
        /* background-size: cover; */
        /*  overflow: scroll;
        overflow-x: hidden;
        overflow-y: hidden; */
        width: 100%;
      }

      .swiper-container {
        width: 100%;
        height: 632px;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .fade {
        opacity: 0;
      }

      .show {
        opacity: 1;
      }

      * {
        margin: 0;
        padding: 0;
      }

      ol,
      ul {
        list-style-type: none;
      }

      a {
        color: #666;
        text-decoration: none;
      }

      .left {
        float: left;
      }

      .right {
        float: right;
      }

      #nav {
        height: 80px;
        background-color: #EEEEEE;
        /* background:url("img/111.png") no-repeat; */
        background-color: rgba(88, 88, 88, 0.3);
      }

      #nav li {
        float: left;
        margin: 0px 10px;
        line-height: 80px;
      }

      #nav ul {
        padding-left: 500px;
      }

      #nav li a {
        color: #fff;
        font-weight: bold;
      }

      #nav li a:hover {
        color: #fdd2ed;
      }

      #nav .logo>img {
        height: 60px;
        width: 60px;
        margin-top: 10px;
      }

      #nav .logo>p {
        height: 30px;
        width: 60px;
        margin-top: 10px;
      }

      .container {
        width: 100%;

        /*border:1px solid #f00;*/
        margin: 0px auto;
      }

      .container1 {
        width: 1280px;
        /*border:1px solid #f00;*/
        margin: 0px auto;
      }


      #banner {
        height: 400px;
        /* height:630px; */
        width: 100%;
      }

      #star {
        height: 700px;
        background-color: #F2F2F2;
        background-color: rgba(255, 255, 255, 0.5);
      }

      #star .startop {
        text-align: center;
        height: 80px;
      }
      #star .startop>img{
        width: 900px;
      }

      #star ul {
        width: 1280px;
        margin: 10px auto;
      }

      #star li {
        width: 300px;
        float: left;
        border-bottom: 4px solid #dfdfdf;
        transition: all .3s;
        background-color: rgba(255, 255, 255);
        margin-bottom: 35px;
      }

      #star li:hover {
        border-bottom: 4px solid #4fb59d;
        transform: translateY(-10px);
      }

      #star li img {
        width: 300px;
        height: 400px;
      }

      #star li h2 {
        text-align: center;
        margin-top: 10px;
      }

      #star li p {
        text-align: center;
        margin: 10px 0px;
        font-size: 12px;
        color: #bdbdbd;
      }

    

    
      #star .line {
        width: 0px;
        height: 450px;
        border-left: 1px solid #EAEAEA;
        margin: 0px 10px;
      }

      #foot {
        text-align: center;
        margin: 10px;
        height: 80px;
        background-color: #474443;
        color: #FFFFFF;
        line-height: 80px;
      }
      #acc{
  height:350px;
  background-color:#f6f6f6;
  overflow:hidden;
  }
#acc .acctop{
  text-align:center;
  margin:0px 0px;
  }
#acc .main{
  width:100%;
  margin:0 auto;
        text-align: center;

  }
  #acc .main>img{
        width: 900px;
      }

      #add{
  height:650px;
  background-color:#f6f6f6;
  overflow:hidden;
  }
#add .addtop{
  text-align:center;
  margin:0px 0px;
  }
#add .main{
  width:100%;
  margin:0 auto;
        text-align: center;

  }
  #add .main>img{
        width: 900px;
      }

#aee{
  height:700px;
  background-color:#f6f6f6;
  overflow:hidden;
  }
#aee .aeetop{
  text-align:center;
  margin:0px 0px;
  }
#aee .main{
  width:100%;
  margin:0 auto;
        text-align: center;

  }
  #aee .main>img{
        width: 900px;
      }
    </style>
  </head>

  <body>

    <div id="nav">
      <div class="container">
        <div class="logo left">
          <img src="img/222.png">
        </div>
        <div class="left left">
          <p style="color: #fff;margin-top: 15px;margin-left: 10px;font-size: 12px;">
            <b style="font-size: 18px;margin-right: 5px;">魔仙堡</b>
            MagicFairyCastle</p>
          <p style="color: #fff;margin-top: 5px;font-size: 14px;margin-left: 10px;">民 宿 订 购 网</p>
        </div>
        <ul class="right">
          <li><a href="index.php">首页</a></li>
        <?php
              if ($_SESSION["账户"]==NULL){
                  echo"<li><a href=\"logintell.php\">登录</a></li>";
                  echo"<li><a href=\"registertell.php\">注册</a></li>";
              }else{
                  echo "<li><a>当前登陆用户账号:";
                  echo $_SESSION["账户"];
                  echo "</a></li>";
                  echo"<li><a href=\"yonghu.php\">用户中心</a></li>";
                  echo"<li><a href=\"user_exit.php\">退出</a></li>";
              }
              ?>
          <li><a href="#">客服</a></li>
        </ul>
      </div>
    </div>
    <div id="banner"></div>
    <div id="star">
      <div class="container1">
        <div class="startop">
          <p style="font-size: 26px;margin-top: 15px;">民宿预订</p>
          <p style="color: #828282;margin-top: 15px;font-size: 18px;">Homestay Booking</p>
        </div>
        <ul>
          <li>
            <div>
              <img src="img/view1.jpg">
            </div>
            <h2>热门目的地</h2>
            <p>不一样的旅途 不一样的意义</p>
            <p><a class="money" href="roomInfo.php">点击此处查看更多 </a></p>
            
          </li>
          <li class="line"></li>
          <li>
            <div>
              <img src="img/view2.jpeg">
            </div>
            <h2>经典旅行城市</h2>
            <p>山河风光 应有尽有</p>
            <p><a class="money" href="roomInfo.php">点击此处查看更多 </a></p>
            
          </li>
          <li class="line"></li>
          <li>
            <div>
              <img src="img/view3.jpg">
            </div>
            <h2>更多好房推荐</h2>
            <p>想住的都在魔仙堡</p>
            <p><a class="money" href="roomInfo.php">点击此处查看更多</a> </p>
            
          </li>
          <li class="line"></li>
          <li>
            <div>
              <img src="img/view4.jpg">
            </div>
            <h2>在售特惠房源</h2>
            <p>更少的预算 更优的价格</p>
            <p><a class="money" href="roomInfo.php">点击此处查看更多</a> </p>
          </li>
        </ul>
        
      </div>
    </div>
    <div id="acc">
	<div class="container1">
 		<div class="acctop">
                	<p style="font-size: 26px;">预订流程</p>
          <p style="color: #828282;margin-top: 15px;font-size: 18px;">Booking Process</p>
   		</div>
     	<div class="main">
        	<div>
            <img style="margin-top: 26px;" src="img/333.png">
          </div>
                
            </div>
            
 	</div>
</div>
<div id="add">
  <div class="container1">
    <div class="addtop">
                  <p style="font-size: 26px;">我们的优势</p>
          <p style="color: #828282;margin-top: 15px;font-size: 18px;">Advantage</p>
      </div>
      <div class="main">
          <div>
            <img style="margin-top: 26px;" src="img/444.png">

          </div>
                
            </div>
             
          
  </div>
</div>
<div id="aee">
	<div class="container1">
 		<div class="aeetop">
                	<p style="font-size: 26px;">常见的问题</p>
          <p style="color: #828282;margin-top: 15px;font-size: 18px;">Common Problem</p>
   		</div>
     	<div class="main">
        	<div>
            <img style="margin-top: 26px;" src="img/555.png">
          </div>
                
            </div>
            
 	</div>
</div>
    <div id="foot">
      <div class="container1">
        <p>
          <a href="javascript:;" id="btn">
            Copyright@2020The roject by
            <span style="color: #007AFF;">七魔仙_堡</span>
            .All Rights Reserved
          </a>
        </p>
      </div>
    </div>

    <div class="totop">
      <a href="javascript:;" id="btn"></a>
    </div>


    <script type="text/javascript" src="js/swiper.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        var totop = document.getElementById("btn");
        totop.style.display = "none";
        var nav = document.getElementById("nav");
        var navTop = nav.offsetTop;

        var timer = null;
        totop.onclick = function() {
          timer = setInterval(function() {
            var backTop = document.documentElement.scrollTop || document.body.scrollTop;
            var speedTop = backTop / 5;
            document.documentElement.scrollTop = backTop - speedTop;
            if (backTop == 0) {
              clearInterval(timer);
            }
          }, 30);
        }
        var pageHeight = 700;
        window.onscroll = function() {
          var backTop = document.documentElement.scrollTop || document.body.scrollTop;
          if (backTop > pageHeight) {
            totop.style.display = "block";
          } else {
            totop.style.display = "none";
          }
          if (backTop >= navTop) {
            nav.style.position = "fixed";
            nav.style.top = "0";
            nav.style.left = "0";
            nav.style.zIndex = "100";
          } else {
            nav.style.position = "";
          }
        }
      }
    </script>
    <script type="text/javascript" src="js/swiper.js"></script>
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
      $(window).scroll(function() {
        var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
        var backTop = $("#world").offset().top - $(window).height() / 1.2;
        if (scrollT > backTop) {
          $(".a1").addClass("animated bounceInRight show").removeClass("fade");
          $(".a2").addClass("animated bounceInDown show").removeClass("fade");
          $(".a3").addClass("animated bounceInUp show").removeClass("fade");
          $(".a4").addClass("animated bounceInLeft show").removeClass("fade");
        }
      });
      var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        loop: true,
        autoplay: 3000,


        speed: 1000,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        effect: 'fade', //  effect: 'flip',effect: 'coverflow',slide', 'fade',cube
        grabCursor: true,
        cube: {
          shadow: false,
          slideShadows: false,
          shadowOffset: 20,
          shadowScale: 0.94
        }
      });
    </script>


  </body>
</html>
